﻿<%@ Page Culture="auto" UICulture="auto" Title="Adding and removing elements" Language="C#"
    MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="AddingRemoving.aspx.cs"
    Inherits="BM.Tools.WebControls.MForm.Example.Core.AddingRemoving" %>

<%@ Register Assembly="BM.Tools.WebControls.MForm" Namespace="BM.Tools.WebControls.MForm.Controls"
    TagPrefix="mf" %>
<%@ Register Assembly="BM.Tools.WebControls.MForm" Namespace="BM.Tools.WebControls.MForm.Controls.Additions"
    TagPrefix="mfadd" %>
<%@ Register Assembly="BM.Tools.WebControls.MForm" Namespace="BM.Tools.WebControls.MForm.Controls.ValueHandlers"
    TagPrefix="mfvh" %>
<%@ Register Assembly="BM.Tools.WebControls.MForm" Namespace="BM.Tools.WebControls.MForm.Controls.Modifiers"
    TagPrefix="mfmod" %>
<%@ Register TagPrefix="mftitle" Namespace="BM.Tools.WebControls.MForm.Controls.Titles"
    Assembly="BM.Tools.WebControls.MForm" %>
    
<asp:Content ContentPlaceHolderID="Demonstration" runat="server">
    <span id="CultureInfo" style="display: none">
        <asp:Literal ID="CultureInfoLiteral" runat="server"></asp:Literal></span>
    <p>
        Click any of the form items and buttons corresponding to the clicked item's context
        will appear on the upper left corner of the screen.
    </p>
    <p>
        If you want to remove elements, press the (x) sign in the item's title.
    </p>
    <p>
        The structure of the form is described below. The items with the (+) sign can be
        added
    </p>
    <ul>
        <li>Retailers
            <ul>
                <li>Retailer (+)
                    <ul>
                        <li>Board of supervisors
                            <ul>
                                <li>Supervisor (+)</li>
                                <li>Meeting (+)
                                    <ul>
                                        <li>Subject (+)</li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li>Division (+) </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
    <mf:RootValidator runat="server" ControlToValidate="Root1" />
    <mf:Root ID="Root1" runat="server">
        <Contents>
            <mf:Branch Name="Retailers" runat="server">
                <Contents>
                    <mf:Branch Name="Retailer" runat="server" MaxOccurs="4">
                        <Contents>
                            <mf:Branch Name="BoardOfSupervisors" runat="server">
                                <Contents>
                                    <mf:Branch Name="Supervisor" runat="server" MaxOccurs="12">
                                        <Contents>
                                            <mf:Leaf Name="FirstName" runat="server">
                                                <Additions>
                                                    <mfadd:Restriction runat="server" ErrorText="{Value} is lower than for element {Name}"
                                                        RestrictionType="MaxLength" Value="50" />
                                                </Additions>
                                            </mf:Leaf>
                                            <mf:Leaf Name="LastName" runat="server">
                                                <Additions>
                                                    <mfadd:Restriction runat="server" RestrictionType="MaxLength" Value="50" />
                                                </Additions>
                                            </mf:Leaf>
                                            <mf:Leaf Name="JoiningDate" runat="server" DataType="Date">
                                            </mf:Leaf>
                                        </Contents>
                                    </mf:Branch>
                                    <mf:Branch Name="Meeting" runat="server" MaxOccurs="10">
                                        <Contents>
                                            <mf:Leaf Name="Date" runat="server" DataType="Date">
                                            </mf:Leaf>
                                            <mf:Leaf Name="Time" runat="server" DataType="Time">
                                            </mf:Leaf>
                                            <mf:Leaf Name="Subject" runat="server" MaxOccurs="10">
                                                <Additions>
                                                    <mfadd:Restriction runat="server" RestrictionType="MaxLength" Value="100" />
                                                </Additions>
                                            </mf:Leaf>
                                            <mf:Leaf Name="Conclusion" runat="server">
                                                <Additions>
                                                    <mfadd:Restriction runat="server" RestrictionType="MaxLength" Value="1000" />
                                                </Additions>
                                            </mf:Leaf>
                                        </Contents>
                                    </mf:Branch>
                                </Contents>
                            </mf:Branch>
                            <mf:Branch Name="Division" runat="server" MaxOccurs="10">
                                <Contents>
                                    <mf:Leaf Name="divisionNumber" runat="server" DataType="PositiveInteger" LeafType="Attribute">
                                    </mf:Leaf>
                                    <mf:Leaf Name="City" runat="server">
                                        <Additions>
                                            <mfadd:Restriction runat="server" RestrictionType="MaxLength" Value="50" />
                                        </Additions>
                                    </mf:Leaf>
                                    <mf:Leaf Name="FoundationYear" runat="server" DataType="GYear">
                                    </mf:Leaf>
                                    <mf:Leaf Name="NumberOfEmployees" runat="server" DataType="PositiveInteger">
                                    </mf:Leaf>
                                    <mf:Leaf Name="NetIncome" runat="server" DataType="Decimal">
                                    </mf:Leaf>
                                </Contents>
                            </mf:Branch>
                        </Contents>
                    </mf:Branch>
                </Contents>
            </mf:Branch>
        </Contents>
    </mf:Root>
</asp:Content>
<asp:Content ContentPlaceHolderID="DemonstrationEnd" runat="server">
    <mf:RootValidator runat="server" ControlToValidate="Controller" ValidationGroup="Controller" />
    <mf:Root runat="server" ID="Controller">
        <Contents>
            <mf:Branch Name="Controller" runat="server" DisplayName="Add buttons Controller">
                <Contents>
                    <p>
                        If you want to change the behavior of the control that displays the add buttons,
                        you can do it using the form below:
                    </p>
                    <mf:Leaf Name="Depth" runat="server" DisplayName="Depth" DefaultValue="3" DataType="PositiveInteger">
                        <ValueHandler>
                            <mfvh:DropDownListValueHandler runat="server">
                                <DropDownList>
                                    <asp:ListItem Value="1" />
                                    <asp:ListItem Value="2" />
                                    <asp:ListItem Value="3" />
                                    <asp:ListItem Value="4" />
                                    <asp:ListItem Value="5" />
                                </DropDownList>
                            </mfvh:DropDownListValueHandler>
                        </ValueHandler>
                    </mf:Leaf>
                    <mf:Leaf Name="CountEmptyContainers" runat="server" DisplayName="Count empty containers"
                        DataType="Boolean" DefaultValue="true">
                        <ValueHandler>
                            <mfvh:CheckBoxValueHandler runat="server" OnValue="true" OffValue="false">
                                <CheckBox />
                            </mfvh:CheckBoxValueHandler>
                        </ValueHandler>
                        <Additions>
                            <mfadd:Restriction runat="server" RestrictionType="MaxLength" Value="12" />
                        </Additions>
                    </mf:Leaf>
                </Contents>
            </mf:Branch>
        </Contents>        
    </mf:Root>
    <asp:Button ID="Button1" runat="server" Text="Set tab buttons properties" ValidationGroup="Controller"
        OnClick="Button1_Click" />
</asp:Content>
<asp:Content ID="Content1" ContentPlaceHolderID="Description" runat="server">    
    <p>
        MForm displays a tree of elements - if the schema permits, some of these elements
        may be removed, other may have subelements added.
    </p>
    <p>
        When it comes to removing, the task is easy - there is a removal button near the
        element. Pressing this button removes the element on condition that after removing
        this element the amount of these element's siblings would not be lower than the
        <code>MinOccurs</code> property.
    </p>
    <p>
        But with adding elements, the task is a little bit more complicated. The buttons
        to add elements are kept in their elements parents. In HTML they are in the <code>div</code>
        with <code>BC</code> (button container) class. It is absolutely possible to use
        these buttons, however mixing adding new elements with editing the existing ones
        is not favourable.
    </p>
    <p>
        This is why in the defualt styles the <code>div.MForm-BtnC</code> selector is set to <code>display:
            none</code>.
    </p>
    <p>
        To display the 'add' buttons in one place, the <code>AddButtons</code> control can
        be used.
    </p>
    <p>
        The control works in such a way, that clicking an element on the form forces the
        control to display 'add' buttons that are bound to the clicked element.
    </p>
    <p>
        The control contains a <code>Depth</code> property (the default value of this property
        is 2), which informs how deep should the control go in displaying parent's buttons:
    </p>
    <ul>
        <li><b>1</b> - display only clicked element's buttons</li>
        <li><b>2</b>- display clicked element's and its parent's buttons)</li>
        <li><b>3</b>- display clicked element's and its parent's and grandparent's buttons)</li>
        <li>etc ...</li>
    </ul>
    <p>
        Because some elements do not have associated buttons (i.e. leaf elements that cannot
        have any children), setting the <code>Depth</code> property to 3 will not necessarily
        mean that 3 button containers will be displayed. To count only non-empty button
        containers, one can set the <code>CountEmptyContainers</code> property to false.
    </p>
</asp:Content>
